<template>

  <div style="text-align: right; margin-right: 30px; margin-bottom: 20px;">
    <a-button type="primary" @click="openChange" ghost>
      <template #icon>
        <plus-circle-filled/>
      </template>
      添加
    </a-button>
  </div>
  <a-table :columns="columns" :data-source="page.list" :pagination="pagination" @change="handleTableChange">
    <template #time_id="{ text }">
      <span>
        {{ text }}
      </span>
    </template>

    <template #start_time="{ text }">
      <span>
        {{ text }}
      </span>
    </template>

    <template #expect_time="{ text }">
      <span>
        <history-outlined/>
        {{ text }}
      </span>
    </template>

    <template #email="{ text }">
      <span>
        <mail-outlined/>
        {{ text }}
      </span>
    </template>

    <template #action="{ record }">
      <el-link type="warning" @click="getId(record)">修改</el-link>
      <a-modal v-model:visible="visible1" @ok="changeTime" title="修改">
        <a-form-item label=" 开始时间" has-feedback :validateStatus="type1" :help="message1">
          <a-select ref="select" v-model:value="value1" style="width: 120px" @change="setTime1">
            <a-select-option v-for="item in timelist" :value="item.time">{{ item.time }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label=" 结束时间" has-feedback :validateStatus="type2" :help="message2">
          <a-select ref="select" v-model:value="value2" style="width: 120px" @change="setTime1">
            <a-select-option v-for="item in timelist" :value="item.time">{{ item.time }}</a-select-option>
          </a-select>
          <el-dropdown>
            <span class="el-dropdown-link">
              选择时间
              <el-icon class="el-icon--right">
                <arrow-down/>
              </el-icon>
            </span>
          </el-dropdown>
        </a-form-item>
      </a-modal>
    </template>
  </a-table>


  <a-modal v-model:visible="visible2" @ok="insertTime" title="添加">
    <a-form-item label=" 开始时间" has-feedback :validateStatus="type3" :help="message3">
      <a-select ref="select" v-model:value="value3" style="width: 120px" @change="setTime2">
        <a-select-option v-for="item in timelist" :value="item.time">{{ item.time }}</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label=" 结束时间" has-feedback :validateStatus="type4" :help="message4">
      <a-select ref="select" v-model:value="value4" style="width: 120px" @change="setTime2">
        <a-select-option v-for="item in timelist" :value="item.time">{{ item.time }}</a-select-option>
      </a-select>
      <el-dropdown>
        <span class="el-dropdown-link">
          选择时间
          <el-icon class="el-icon--right">
            <arrow-down/>
          </el-icon>
        </span>
      </el-dropdown>
    </a-form-item>
  </a-modal>
  <el-dialog
      v-model="visible3"
      title="Tips"
      width="30%"
      :before-close="handleClose"
  >
    <span>是否清除所有时间安排</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible3 = false">取消</el-button>
        <el-button type="primary" @click="clearTime(),visible3 = false"
        >确认</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>


<script setup>
////////////////////////////////////////////
import {reactive, ref} from "vue";
import {post, setLocalToken} from "@/common";
import {get} from "@/common";
import {message} from "ant-design-vue";
import dayjs from "dayjs";
import {ElMessage, ElMessageBox} from "element-plus";

const value1 = ref("");
const value2 = ref();
const value3 = ref("");
const value4 = ref();

const timelist = [
  {
    timeid: "1",
    time: "08:00:00",
    time_number: 8
  },
  {
    timeid: "2",
    time: "09:00:00",
    time_number: 9
  },
  {
    timeid: "3",
    time: "10:00:00",
    time_number: 10
  },
  {
    timeid: "4",
    time: "11:00:00",
    time_number: 11
  },
  {
    timeid: "5",
    time: "12:00:00",
    time_number: 12
  },
  {
    timeid: "6",
    time: "14:00:00",
    time_number: 14
  },
  {
    timeid: "7",
    time: "15:00:00",
    time_number: 15
  },
  {
    timeid: "8",
    time: "16:00:00",
    time_number: 16
  },
  {
    timeid: "9",
    time: "17:00:00",
    time_number: 17
  },
  {
    timeid: "10",
    time: "18:00:00",
    time_number: 18
  }

]


const setTime1 = (item) => {
  date.start_time = value1.value;
  date.end_time = value2.value;
}
const setTime2 = (item) => {
  date.start_time = value3.value;
  date.end_time = value4.value;
}
const columns = [
  {
    dataIndex: "time_id", //
    title: "序号",
    slots: {
      customRender: "time_id",
    },
  },
  {
    dataIndex: "start_time", //
    title: "开始时间",
    slots: {
      customRender: "start_time",
    },
  },
  {
    dataIndex: "end_time", //
    title: "结束时间",
    slots: {
      customRender: "end_time",
    },
  },

  {
    title: "操作",
    key: "action",
    slots: {
      customRender: "action",
    },
  },
];
const page = ref({});
const pagination = reactive({
  current: 1, //当前页
  pageSize: 5, //每页记录数
  total: 0, //总记录数
  pageSizeOptions: ["2", "3", "5", "10", "20", "30", "100"], //每页记录下拉框的选型
  showSizeChanger: true, //是否展示每页记录数下拉框
  showQuickJumper: true, //是否展示快速跳转
  showTotal: (total, range) => {
    //展示总页数等文字说明信息的
    return (
        "共" +
        total +
        "条记录,当前第" +
        pagination.current +
        "页" +
        (range[1] - range[0] + 1) +
        "条记录"
    );
  },
});


const date = reactive({
  time_id: "",
  start_time: "",
  end_time: "",
});

const visible1 = ref(false);
const visible3 = ref(false);


////////////////////////////////////////////
const getId = (record) => {
  visible1.value = true;
  date.time_id = record.time_id;

};


const visible2 = ref(false);
const visible4 = ref(false);
const openChange = (record) => {
  visible2.value = true;
};


const type1 = ref("");
const message1 = ref("");
const type2 = ref("");
const message2 = ref("");
const type3 = ref("");
const message3 = ref("");
const type4 = ref("");
const message4 = ref("");

const insertTime = () => {
  post("/security/timeSet/insertTime", date).then((res) => {
    if (res.success) {
      visible2.value = false;
      getPage(1);
    }
    if (res.code == 300) {
      visible2.value = false;
      getPage(1);
      visible3.value = true;
    }
  });
};


const clearTime = () => {
  post("/security/timeSet/clearTime").then((res) => {
    if (res.success) {
      visible4.value = true;
      getPage(1);
    }
  });
}


const changeTime = () => {

  post("/security/timeSet/changeTime", date).then((res) => {
    if (res.success) {
      visible1.value = false;
      getPage(1);
    }

  });
}

// const addNullTime = () => {

//   post("/security/forgetpassword/addTime", date).then((res) => {
//       message.info(res);
//   });
// }

const getPage = (pageNum = 1) => {
  date.pageNum = pageNum;
  date.pageSize = pagination.pageSize;

  post("/security/timeSet/getTimeList", date).then((res) => {
    page.value = res.data; //将服务端传来的分页数据赋值予page

    //更新分页引擎
    pagination.current = page.value.current;
    pagination.pageSize = page.value.pageSize;
    pagination.total = page.value.total;

    console.log(res.data.list);
  });
};

getPage(1);

const handleTableChange = (pagi, filters, sorter) => {
  pagination.current = pagi.current;
  pagination.pageSize = pagi.pageSize;
  pagination.total = pagi.total;

  getPage(pagination.current);
};
</script>




